<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addUserDiv">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true" onclick="getUser()"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default" onclick="user.deleteItem">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>

<h3 class="sub-header">用户管理</h3>

	
<table  id="userTable"></table>		

		 <!-- 新增界面 -->
	    <div class="modal fade" id="addUserDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">新增用户</h4>
		      </div>
		      <div class="modal-body">
				<form class="form-horizontal" role="form" action="<%=request.getContextPath() %>/sys/add" method="post">
				  <div class="form-group">
				    <label for="code" class="col-sm-2 control-label">code</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="code">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="username" class="col-sm-2 control-label">password</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="password">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="photo" class="col-sm-2 control-label">photo</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="photo">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="username" class="col-sm-2 control-label">Username</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="username">
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-primary">新增</button>
				    </div>
				  </div>
				</form>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- 修改  模态 -->
		 <div class="modal fade" id="updateUserDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">修改用户</h4>
		      </div>
		      <div class="modal-body">
				<form class="form-horizontal" role="form" id="updateForm"method="post" action="${ctx }/sys/update">
				<input type="hidden" id="userId" name="id"/>
				   <div class="form-group">
				    <label for="code" class="col-sm-2 control-label">code</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="code" id="code">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="username" class="col-sm-2 control-label">password</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="password" id="password">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="photo" class="col-sm-2 control-label">photo</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="photo" id="photo">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="username" class="col-sm-2 control-label">Username</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="username" id="username">
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-primary">修改</button>
				    </div>
				  </div>
				</form>
		      </div>
		    </div>
		  </div>
		</div>
	<script>
	function getUser(){
		var id = $.map($('#userTable').bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
		console.info(id);
		 $("#updateUserForm").attr("action","<%=request.getContextPath()%>/sys/update");
		  $.post( "<%=request.getContextPath()%>/sys/get?id="+id,function(data) {  
		        	console.info("data:"+data)
		        	$("#username").val(data.username);
		        	$("#password").val(data.password);
		        	$("#code").val(data.code);
		        	$("#photo").val(data.photo);
		        	$("#userId").val(data.id);
		        },"json"  
		    );
		  $('#updateUserDiv').modal('show');  
	}
	 $(function () { 
		 //1.初始化Table 
		 user.init(); 
		}); 
		var user = { 
		 //初始化Table 
				 deleteItem :function (){
				    var selRow =  $('#userTable').bootstrapTable('getSelections');
				    var idField =  $('#userTable').bootstrapTable("getOptions").idField;
				    var id = $.map($('#userTable').bootstrapTable('getSelections'), function (row) {
			            return row.id;
			        });
				    if(selRow!=null){       
				            $.ajax({
				               type: "POST",
				               cache:false,
				               async : true,
				               dataType : "json",
				               url:  "${ctx}/sys/deleteUsers",
				               data:{"id": id},
				               success: function(data){
				                       if ( data ){
				                    	   var ids = $.map(selRow, function (row) {
				                               return row.id;
				                           });
				                           $table.bootstrapTable('remove', {
				                               field: 'id',
				                               values: ids
				                           });
				                       }
				               }
				            });
				    }else{
				        alert('请选取要删除的数据行！');
				    }
				},
          init : function () { 
		  $('#userTable').bootstrapTable({ 
		   url: '<%=request.getContextPath()%>/sys/listUser',   //请求后台的URL（*） 
		   dataField:"list",//默认list的键值对
		   method: 'post',      //请求方式（*） 
		   toolbar: '#toolbar',    //工具按钮用哪个容器 
		   striped: true,      //是否显示行间隔色 
		   pagination: true,     //是否显示分页（*） 
		   sortable: false,      //是否启用排序 
		   sortOrder: "asc",     //排序方式 
		   search:true,
		   //queryParams: oTableInit.queryParams,//传递参数（*） 
		   sidePagination: "client",   //分页方式：client客户端分页，server服务端分页（*） 
		   pageNumber:1,      //初始化加载第一页，默认第一页 
		   pageSize: 10,      //每页的记录行数（*） 
		   pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*） 
		   strictSearch: true, 
		   singleSelect: true,//复选框只能选择一条记录
		   showRefresh: true, //是否显示刷新按钮
		   showColumns: true,     //是否显示所有的列 
		   minimumCountColumns: 2,    //最少允许的列数 
		   clickToSelect: true,    //是否启用点击选中行 
		   height: 500,      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 
		   uniqueId: "id",      //每一行的唯一标识，一般为主键列 
		    columns: [{ 
		    checkbox: true 
		   }, { 
		    field: 'id', 
		    title: '编号' 
		   }, { 
		    field: 'username', 
		    title: '姓名' 
		   }, { 
		    field: 'code', 
		    title: '账号' 
		   },{ 
		    field: 'password', 
		    title: '密码' 
		   },{
			   field: 'photo', 
			    title: '照片' 
		   } 
		   ] 
		  }); 
		 },
} 
		  
	/*
	    <thead>
        <tr>
           <th data-field="state" data-checkbox="true"></th>
            <th data-field="id">序号</th>
				<th data-field="code">账号</th>
				<th data-field="password">密码</th>
				<th data-field="photo">照片路径</th>
				<th data-field="username">用户名</th>
				<th>操作</th> 
        </tr>
    </thead>*/
	</script>
